<template>
	<view class="pageview">
		<view class="top-warp"><zx-nav title="订单详情" bg="#fff"></zx-nav></view>
		<view class="main">
			<view class="box order">
				<view class="flex-direction">
					<div class="order-hd">
						<view class="flex align-center justify-between">
							<view class="flex align-center">
								<view class="line"></view>
								<text>收货信息</text>
							</view>
							<view class="btn u-primary" v-if="orderinfo.status == 5 || orderinfo.status == 10" @click="orderShowLog(orderinfo.order_no)">查看物流</view>
						</view>
					</div>
					<view class="order-bd">
						<view class="text flex justify-between align-center">
							收货人：
							<view>{{ orderinfo.contact_name || '' }}</view>
						</view>
						<view class="text flex justify-between align-center">
							电话：
							<view @tap="call_phone(orderinfo.contact_phone)">
								{{ orderinfo.contact_phone || '' }}
								<image src="https://m.huaxianpai.com/upload/static/microStore/phone@2x.png" class="icon"></image>
							</view>
						</view>
						<view class="text flex justify-between align-center">
							收货地址：
							<view class="flex-sub">{{ orderinfo.address || '' }}</view>
						</view>
						<div class="order-item-ft">
							<div class="price flex justify-between align-center">
								共计{{ orderinfo.xh_count || 0 }}件商品
								<view>
									<text class="money">小计：</text>
									<text>¥{{ orderinfo.goods_amount || 0 }}</text>
								</view>
							</div>
							<div class="price flex justify-between align-center margin-top">
								<view>运费：¥{{ orderinfo.transport_amount || 0 }}</view>
								<view>
									<text class="money">总计：</text>
									<text class="text-orange">¥{{ orderinfo.order_amount || 0 }}</text>
								</view>
							</div>
						</div>
					</view>
				</view>
			</view>
			<view class="box order">
				<view class="flex-direction">
					<div class="order-hd ">
						<view class="flex align-center justify-between">
							<view class="flex align-center">
								<view class="line"></view>
								<text>商品详情</text>
							</view>
							<text class="text-grey">{{ orderinfo.status_ || '' }}</text>
						</view>
					</div>
					<view class="order-bd">
						<view class="goods" v-for="(shop, index) in orderinfo.goods_data">
							<view class="shop-hd u-flex-y-center">
								<div class="imgbox"><image :src="shop.supplier_img + '?imageView2/0/w/140'"></image></div>
								<text class="supplier_name">{{ shop.supplier_name }}</text>
							</view>
							<div class="goodslist flex  align-center " v-for="(item, index) in shop.data" :key="index" @click="orderShow(orderinfo.id)">
								<div class="imglist flex-sub flex align-start">
									<image :src="item.img_url[0] + '?imageView2/0/w/140'" class="img" mode="widthFix"></image>
									<view class="goodsinfo flex-sub">
										<view class="name flex justify-between">
											{{ item.product_name }}
											<text class="price">¥{{ item.price }}</text>
										</view>
										<view class="level flex justify-between">
											<div>
												<text>{{ item.product_dengji_ }}</text>
												<text class="u-m-l-10">{{ item.product_guige_ }}</text>
												<text class="u-m-l-10">{{ item.product_changdu_ }}</text>
											</div>
											<div class="num">×{{ item.qty }}</div>
										</view>
									</view>
								</div>
							</div>
						</view>
						<div class="order-item-ft">
							<div class="price flex justify-between align-center">共计 {{ orderinfo.xh_count }} 件商品</div>
						</div>
					</view>
				</view>
			</view>
			<view class="box order">
				<view class="flex-direction">
					<div class="order-hd">
						<view class="flex align-center justify-between">
							<view class="flex align-center">
								<view class="line"></view>
								<text>订单信息</text>
							</view>
						</view>
					</div>
					<view class="order-bd">
						<view class="text flex justify-between align-center">
							订单编号：
							<view>
								{{ orderinfo.order_no }}
								<text class="copy text-orange" @tap="copyOrder(orderinfo.order_no)">复制</text>
							</view>
						</view>
						<view class="text flex justify-between align-center">
							下单日期：
							<text>{{ orderinfo.created_at || '' }}</text>
						</view>
						<view class="text flex justify-between align-center">
							支付方式：
							<text>{{ orderinfo.pay_type_ || '' }}</text>
						</view>
						<view class="text flex justify-between align-center">
							发货时间：
							<text>{{ orderinfo.express_at || '' }}</text>
						</view>
						<view class="text flex justify-between align-center">
							配送时间：
							<text>{{ orderinfo.order_ps_info && orderinfo.order_ps_info.ps_time }}</text>
						</view>
						<view class="text flex justify-between align-center">
							快递单号：
							<view v-if="orderinfo.express_num">
								{{ orderinfo.express_num || '' }}
								<text class="copy text-orange" @tap="copyOrder(orderinfo.express_num)">复制</text>
							</view>
						</view>
						<view class="text flex justify-between align-center">
							发货物流
							<text>{{ orderinfo.express_name || '' }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="box order">
				<view class="flex-direction">
					<div class="order-hd">
						<view class="flex align-center justify-between">
							<view class="flex align-center">
								<view class="line"></view>
								<text>其他信息</text>
							</view>
						</view>
					</div>
					<view class="order-bd">
						<view class="text flex justify-between align-center">
							订单备注：
							<view>{{ orderinfo.remark1 || '' }}</view>
						</view>

						<view class="text flex justify-between align-center">
							物流方式
							<text>{{ orderinfo.transport_name || '' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderinfo: {}
		};
	},
	components: {},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.orderDetails();
		}
	},
	methods: {
		orderDetails() {
			this.$postAction(this.$api.getShopOrderDetails + this.id).then(da => {
				if (da.code == 0) {
					this.orderinfo = da.data;
				}
			});
		},
		//复制单号
		copyOrder(value) {
			uni.setClipboardData({
				data: value
			});
		},
		call_phone(phone) {
			if (phone) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone
				});
			}
		},
		//查看物流
		orderShowLog(order_no) {
			uni.navigateTo({
				url: '/pages/logistics/logistics?order_no=' + order_no
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pageview {
	width: 100%;
	background: #f7f7f7;
}

.main {
	overflow: auto;
	margin: 0;
}

::v-deep .order {
	border-radius: 16rpx;
	background: #ffffff;
	margin: 20upx 28upx;
	padding: 32rpx 0 0;

	.order-hd {
		font-size: 28upx;
		font-weight: bold;
		color: #2c2c2e;
		padding: 0 25upx;

		.line {
			width: 4upx;
			height: 24upx;
			background: linear-gradient(90deg, #ff8844 0%, #ff5d03 100%);
			margin-right: 16upx;
		}

		.text-grey {
			font-size: 24upx;
			color: #aeaeb2;
			font-weight: 400;
		}

		.text-pink {
			font-size: 28upx;
			color: #fa2a6b;
			font-weight: 400;
		}
	}

	.order-bd {
		padding: 32upx 22upx;

		.text {
			font-size: 26upx;
			font-weight: 500;
			color: #1c1c1e;
			line-height: 37upx;
			vertical-align: middle;
			.copy {
				margin-left: 16upx;
			}
			.icon {
				width: 36upx;
				height: 36upx;
				vertical-align: middle;
				margin-left: 20upx;
				margin-top: -3px;
			}
		}

		.text + .text {
			margin-top: 30upx;
		}
		.goods {
			border-bottom: 1px solid #eee;
			padding-bottom: 20upx;
			.shop-hd {
				padding: 15upx 0;
				font-size: 26upx;
				// border-bottom: 1px solid #eee;
				font-weight: blod;
				color: #232323;
				.imgbox {
					height: 60upx;
					width: 60upx;
					border-radius: 100%;
					margin-right: 20upx;
					border: 2upx solid #fe5608;
					overflow: hidden;
					image {
						height: 60upx;
						width: 60upx;
						border-radius: 100%;
					}
				}
			}
			.goodslist {
				.imglist {
					min-height: 128upx;
					.img {
						width: 128upx;
						height: 128upx;
						background: rgba(216, 216, 216, 1);
						border-radius: 8upx;
					}
					image {
						width: 33%;
						border-radius: 8upx;
						& + image {
							margin-left: 0.05%;
						}
					}
				}
				.goodsinfo {
					margin-left: 24upx;
					.name {
						color: #1c1c1e;
						line-height: 45upx;
						font-weight: bold;
						font-size: 32upx;
						.price {
							font-size: 32upx;
							font-weight: bold;
							color: #1c1c1e;
						}
					}
					.level {
						color: #666666;
						margin-top: 24upx;
						line-height: 26upx;
					}
				}

				.num {
					color: #666666;
				}
			}
			.goodslist + .goodslist {
				margin-top: 32upx;
			}
		}
		.order-item-ft {
			margin-top: 38upx;
			.price {
				font-size: 26upx;
				font-weight: 400;
				color: #1c1c1e;
				.money {
					margin-left: 10upx;
				}
				.text-orange {
					color: #ff453a;
					font-weight: bold;
					font-size: 36upx;
				}
			}
		}
	}
}
</style>
